<template>
  <div style="height: calc(100vh - 324px)">
    <table-container
      v-model:columns="columns"
      :loading="isLoading"
      :all-columns="allColumns"
      @refresh="refresh"
    >
      <!-- <template v-if="props.isBtnList" #container-side>
        <a-button type="primary" @click="handleReturn">退回</a-button>
        <a-button type="outline" @click="handleSave">保存</a-button>
        <a-button
          v-if="isFinishedProduct"
          type="outline"
          @click="handleWarehousing"
          >申请入库</a-button
        >
        <a-button v-else type="outline" @click="handleCheck">检验完成</a-button>
      </template> -->
      <a-table
        style="margin-top: 16px"
        :columns="columns"
        :data="renderData"
        :loading="isLoading"
        :scroll="{ x: 100 }"
        :pagination="pagination"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >
        <!--  -->
        <template #secretLevelName="{ record }">
          <secretLevelInfo
            :record="{
              secretLevel: record.secretLevel,
              secretLevelName: record.secretLevelName,
            }"
          />
        </template>
        <!--  -->
        <template #empty>
          <div class="table-empty">
            <tableEmpty />
            <div class="empty-description">暂无数据</div>
          </div>
        </template>
        <template #total="{ record }">
          {{ record.singleEquivalentWeight * record.invReceiveQty }}
        </template>
        <template #optional="{ record }">
          <div v-if="isBtnList" class="btn-list">
            <a-button
              v-if="record.billStatus === '5' || record.billStatus === '10'"
              v-permission="['pms:check-bill:back']"
              type="text"
              @click="returnClick(record)"
              >退回</a-button
            >
            <a-button
              v-if="record.billStatus === '10'"
              v-permission="['pms:check-bill:saveCheckCertification']"
              type="text"
              @click="handleEdit(record)"
              >检验登记</a-button
            >
            <a-button
              v-if="record.billStatus === '13'"
              v-permission="['pms:check-bill:doApplyInInv']"
              type="text"
              @click="handleWarehousing(record)"
              >申请入库</a-button
            >
            <a-button
              v-if="
                record.billStatus === '13' ||
                record.billStatus === '15' ||
                record.billStatus === '25'
              "
              type="text"
              @click="handleDetail(record)"
              >登记详情</a-button
            >
          </div>
          <a-space v-else>
            <span
              v-permission="['pms:check-certification:selectOne']"
              class="btn-class"
              @click="handleDetail(record)"
              >检验详情</span
            >
          </a-space>
        </template>
      </a-table>
    </table-container>
    <a-modal
      :visible="visible"
      title="退回"
      @cancel="handleCancel"
      @ok="handleOk"
    >
      <a-form ref="formRef" :model="returnForm">
        <!-- <a-form-item
          field="facprtlotNo"
          label="厂内合格证"
          :rules="[{ required: true, message: '请输入厂内合格证' }]"
        >
          <a-input v-model="returnForm.facprtlotNo" />
        </a-form-item> -->
        <a-form-item
          field="rejectReason"
          label="退回原因"
          :rules="[{ required: true, message: '请填写退回原因后在进行退回！' }]"
        >
          <a-input v-model="returnForm.rejectReason" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import secretLevelInfo from '@/common/components/secret-level-info/index.vue';

  import tableContainer from '@/common/components/table-container/index.vue';
  import { reactive, ref } from 'vue';
  import lodash from 'lodash';
  // import useFullScreen from '@/common/hooks/fullScreen';
  import usePagination from '@/common/hooks/pagination';
  import { updateBack } from '@/api/admission/inspection';
  import { Message } from '@arco-design/web-vue';
  import tableEmpty from '@/common/components/image/tableEmpty.svg?component';
  import { tableRenderConfig } from '../table-comp/base-table-config';
  import conTableCloums from './con-table-cloums';
  import inspectTableCloums from './inspect-table-cloums';

  const emit = defineEmits([
    'handleFullScreen',
    'handleWarehousing',
    'handleEdit',
    // 'handleCheck',
    'handleDetail',
    'refresh',
    'pageChange',
    'pageSizeChange',
  ]);
  const returnForm = reactive({
    // facprtlotNo: '',
    rejectReason: '',
  });
  const formRef = ref();
  const visible = ref(false);
  // const { isFullscreen, screenClass } = useFullScreen();
  const { pagination, setCurrent, setPageSize, setTotal, queryPagination } =
    usePagination();
  const props = defineProps(['activeKey', 'isBtnList', 'renderData']);
  const tableObj = ref({});
  const isFinishedProduct = ref(true);
  // const selectRow = ref({});
  tableObj.value = props.isBtnList ? conTableCloums : inspectTableCloums;
  const columns = ref([]);
  isFinishedProduct.value = props.activeKey === 'finishedProduct';
  const gettableColums = (val) => {
    columns.value = [];
    tableObj.value[val].forEach((v) => {
      Object.keys(tableRenderConfig).forEach((k) => {
        if (v === k) {
          columns.value.push(tableRenderConfig[k]);
        }
      });
    });
  };
  gettableColums(props.activeKey);
  const allColumns = lodash.cloneDeep(columns);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const returnObj = ref({});
  // const rowClick = (record) => {
  //   selectedKeys.value = [...record['1']];
  //   selectRow.value = record;
  //   console.log(selectRow.value);
  // };
  const init = (val: any[], total: number) => {
    renderData.value = val;
    isLoading.value = false;
    setTotal(total);
  };
  const refresh = () => {
    emit('refresh');
  };
  const pageChange = (val: number) => {
    setCurrent(val);
    emit('pageChange', lodash.cloneDeep(queryPagination.value));
  };
  const pageSizeChange = (val: number) => {
    setPageSize(val);
    emit('pageSizeChange', lodash.cloneDeep(queryPagination.value));
  };
  const handleEdit = (record) => {
    emit('handleEdit', record);
  };
  const handleWarehousing = (record) => {
    emit('handleWarehousing', record);
  };
  // const handleFullScreen = () => {
  //   emit('handleFullScreen', screenClass);
  // };
  // const handleCheck = (record) => {
  //   emit('handleCheck', record);
  // };
  const returnClick = (record) => {
    visible.value = true;
    returnForm.rejectReason = '';
    returnObj.value = record;
  };
  const handleDetail = (record) => {
    emit('handleDetail', record);
  };
  const handleOk = () => {
    formRef.value.validate(async (validate) => {
      if (!validate) {
        if (returnObj.value.billStatus === '11') {
          Message.warning('该数据状态为质量系统检验，不能退回！');
          return;
        }
        const params = {
          pmsCheckBillId: returnObj.value.pmsCheckBillId,
          pmsOrderId: returnObj.value.pmsOrderId,
          ...returnForm,
        };
        const { data } = await updateBack(params);
        if (data) {
          Message.success('退回成功');
          visible.value = false;
          refresh();
        }
        console.log(data);
      }
    });
  };
  const handleCancel = () => {
    visible.value = false;
  };
  // watch(isFullscreen, (newValue) => {
  //   console.log(newValue);
  //   handleFullScreen(newValue);
  // });
  defineExpose({ init, isLoading, setCurrent, pagination, setPageSize });
</script>

<style lang="less" scoped>
  .arco-btn {
    margin-right: 16px;
  }

  .arco-btn-outline {
    color: #1e2228 !important;
    border-color: #d9dee7 !important;
  }

  .btn-class {
    color: #1e89ff;
    cursor: pointer;
  }

  /deep/ .table-container-con {
    height: 100%;
  }

  /deep/ .arco-table {
    height: 95%;
  }

  /deep/ .arco-spin {
    justify-content: space-between;
  }
  .btn-list {
    display: flex;
  }

  .table-empty {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
</style>
